<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '用户设置',
  },
}
</route>

<template>
  <view class="settings-container">
    <!-- 用户信息栏 -->
    <view class="info-card">
      <view class="user-basic" @click="navigateToEdit('profile')">
        <image class="avatar" :src="userStore.userInfo.avatarUrl || '/static/default-avatar.png'" />
        <view class="user-meta">
          <text class="nickname">{{ userStore.userInfo.nickname || '未登录用户' }}</text>
          <view class="extra-info">
            <text class="item">{{ genderMap[userStore.userInfo?.gender] || '保密' }}</text>
            <text class="divider"></text>
            <text class="item">{{ userStore.userInfo.birthday || '保密' }}</text>
            <!-- <text class="divider">|</text>
            <text class="item">{{ userStore.userInfo.region || '未设置地区' }}</text> -->
          </view>
        </view>
        <view class="edit-btn" @click="navigateToEdit('profile')">
          <text>编辑</text>
          <view class="tabbar-youjiantou iconfont c-gray"></view>
        </view>
      </view>
    </view>

    <!-- 账户安全 -->
    <view class="security-list">
      <view class="list-item" @click="navigateToEdit('email')">
        <view class="item-left">
          <text class="title">登录邮箱</text>
        </view>
        <view class="item-right">
          <text class="value">{{ userStore.userInfo.email || '未绑定邮箱' }}</text>
          <view class="tabbar-youjiantou iconfont c-light"></view>
        </view>
      </view>

      <view class="list-item" @click="navigateToEdit('password')">
        <view class="item-left">
          <text class="title">登录密码</text>
        </view>
        <view class="item-right">
          <text class="status">
            {{ userStore.userInfo.isSetPassword ? '修改' : '去设置' }}
          </text>
        </view>
      </view>

      <view class="list-item" @click="navigateToEdit('payPassword')">
        <view class="item-left">
          <text class="title">支付密码</text>
        </view>
        <view class="item-right">
          <text class="status">
            {{ userStore.userInfo.isSetPayPassword ? '修改' : '去设置' }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const genderMap = {
  1: '男',
  2: '未知',
  0: '女',
}

const navigateToEdit = (type: string) => {
  switch (true) {
    case type == 'profile':
      uni.navigateTo({
        url: `/pages/my/editProfile/index`,
      })
      break
    default:
      uni.navigateTo({
        url: `/pages/my/checkEmail/index?operationType=${encodeURIComponent(type)}`,
      })
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  padding: 30rpx;
}

.info-card {
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 16rpx;

  .user-basic {
    position: relative;
    display: flex;
    align-items: center;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      margin-right: 30rpx;
      border-radius: 50%;
    }

    .user-meta {
      flex: 1;
      .nickname {
        display: block;
        margin-bottom: 20rpx;
        font-size: 36rpx;
        color: #333;
      }

      .extra-info {
        display: flex;
        align-items: center;
        .item {
          font-size: 24rpx;
          color: #999;
        }
        .divider {
          margin: 0 20rpx;
          color: #eee;
        }
      }
    }

    .edit-btn {
      position: absolute;
      top: 50%;
      right: 0;
      display: flex;
      align-items: center;
      color: #666;
      transform: translateY(-50%);

      .tabbar-youjiantou {
        margin-left: 10rpx;
        font-size: 32rpx;
      }
    }
  }
}

.security-list {
  background: #fff;
  border-radius: 16rpx;

  .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border: none;
    }

    .item-left {
      .title {
        font-size: 28rpx;
        color: #333;
      }
    }

    .item-right {
      display: flex;
      align-items: center;
      .value {
        margin-right: 20rpx;
        font-size: 26rpx;
        color: #999;
      }
      .status {
        font-size: 24rpx;
        color: #1677ff;
      }
      .tabbar-youjiantou {
        font-size: 32rpx;
        color: #ccc;
      }
    }
  }
}

.c-gray {
  color: #666;
}
.c-light {
  color: #ccc;
}
</style>
